//处理DPR
.font-size(@px) {
  font-size: round(@px / 2) * 1px;
  [data-dpr="2"] & {
    font-size: @px * 1px;
  }
  [data-dpr="2.5"] & {
    font-size: round(@px * 2.5 / 2) * 1px;
  }
  [data-dpr="2.75"] & {
    font-size: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
    font-size: round(@px * 3 / 2) * 1px;
  }
  [data-dpr="4"] & {
    font-size: @px * 2px;
  }
}

//应用时.fonts-size:50
html {
  font-size: 75px;
}

body {
  background-color: #fff;
}

//主页面遮罩层
.Ht_mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  .Ht_maskcontent {
    width: 200px;
    height: 200px;
    background-color: #fff;
    position: absolute;
    padding-top: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    span.fa-spinner {
      font-size: 50px;
      text-align: center;
      display: block;
      margin: 0 auto;
    }
    p {
      font-size: 20px;
      text-align: center;
      position: relative;
      //s{
      //  display: block;
      //  position: absolute;
      //  top: 15px;
      //  left: 142px;
      //  width: 0px;
      //  //height: 1px;
      //  //border-width: 5px;
      //  border-bottom: 3px dashed green;
      //}
    }
  }
}

//头部开始
.Ht_header {
  height: 132/75rem;
  width: 100%;
  background-color: #F9F9F9;
  font-size: 40/75rem;
  h3 {
    line-height: 132/75rem;
    text-align: center;
  }
  span.fa-search {
    position: absolute;
    top: 50/75rem;
    right: 20/75rem;
    font-size: 40/75rem;
  }
  span.fa-angle-left {
    font-size: 40/75rem;
    position: absolute;
    top: 50/75rem;
    left: 20/75rem;
  }
}

//头部End

//主题部分B
.Ht_main {
  .Ht_goods {
    li {
      padding: 20/75rem 0  20/75rem 20/75rem;
      height: 400/75rem;
      width: 100%;
      border-bottom: 1px solid #ccc;
      a {
        display: block;
        width: 100%;
        height: 100%;
        .Ht_pic {
          height: 100%;
          width: 380/75rem;
          float: left;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .Ht_content {
          overflow: hidden;
          position: relative;
          padding: 8/75rem 0 0 16/75rem;
          .Ht_theme {
            p {
              font-size: 30/75rem;
              letter-spacing: 3px;
              line-height: 50/75rem;
              color: #000;
            }
          }
          .Ht_price {
            padding: 5/75rem 0;
            font-size: 35/75rem;
            color: red;
            font-weight: 600;
          }
          .Ht_info {
            padding-top: 10/75rem;
            padding-right: 20/75rem;
            font-size: 20/75rem;
            color: #ccc;
            .Ht_addr {
              padding-right: 5/75rem;
              border-right: 1px solid #ccc;
            }
            .Ht_message {
              float: right;
              span.fa-comments {
                padding-right: 5/75rem;
              }
            }
          }
        }
      }
    }
    li:nth-of-type(1) {
      border-top: 1px solid #ccc;
    }
  }
}

//海淘点击加载更多
.Ht_clickMore {
  position: absolute;
  bottom: -480/75rem;
  left: 0;
  height: 80/75rem;
  line-height: 80/75rem;
  width: 100%;
  background-color: rgba(0, 0, 0, .6);
  text-align: center;
  font-size: 40/75rem;
  color: #fff;
}

//右侧边搜索栏B
.Ht_rightside {
  width: 100%;
  height: 100%;
  background-color: red;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

//右侧边搜索栏E

//右侧头部搜索框
.Ht_r_top {
  width: 100%;
  height: 128/75rem;
  padding: 20/75rem;
  position: relative;
  background-color: #F9F9F9;
  .fa-angle-left {
    position: absolute;
    top: 20/75rem;
    left: 10/75rem;
    font-size: 45/75rem;
    line-height: 80/75rem;
    width: 145/75rem;
    height: 100%;
    color: #000;
  }
  .Ht_r_discount {
    position: absolute;
    left: 85/75rem;
    width: 80/75rem;
    height: 0rem;
    line-height: 80/75rem;
    font-size: 20/75rem;
    text-align: center;
    a {
      display: block;
      width: 100%;
      height: 100%;
    }
    .Ht_r_disbox {
      position: absolute;
      top: 84/75rem;
      left: -28/75rem;
      background-color: #333333;
      width: 240/75rem;
      height: 4.26rem;
      border-radius: 15/75rem;
      -webkit-border-radius: 15/75rem;
      opacity: 0;

      &:before {
        content: "";
        display: block;
        position: absolute;
        top: -22/75rem;
        left: 40/75rem;
        width: 50/75rem;
        height: 50/75rem;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        background-color: #333333;
      }
      ul {
        width: 100%;
        height: 100%;
        li {
          height: 33.3333%;
          width: 100%;
          border-bottom: 1px solid #000;
          a {
            display: block;
            width: 100%;
            height: 100%;
            color: #fff;
            text-align: center;
            line-height: 106/75rem;
          }
        }
      }
    }
  }
  form {
    background-color: #f9f9f9;
    width: 100%;
    height: 100%;
    padding-left: 35/75rem;
    .Ht_r_search {
      height: 80/75rem;
      width: 600/75rem;
      font-size: 25/75rem;
      border-radius: 15/75rem;
      padding-left: 130/75rem;
    }
    .Ht_r_btn {
      position: absolute;
      width: 80/75rem;
      height: 80/75rem;
      line-height: 80/75rem;
      top: 20/75rem;
      right: 10/75rem;
      font-size: 25/75rem;
      color: #000;
      background-color: #f9f9f9;

    }
  }
}

//右侧详情页面B
.Ht_detail {
  padding:0 5/75rem;
  width: 100%;
  //height: 200%;
  background-color: #fff;
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  .Ht_d_top {
    width: 100%;
    height: 128/75rem;
    padding: 20/75rem;
    position: relative;
    background-color: #F9F9F9;
    .fa-angle-left {
      position: absolute;
      z-index: 100;
      top: 20/75rem;
      left: 10/75rem;
      font-size: 45/75rem;
      line-height: 80/75rem;
      width: 145/75rem;
      height: 100%;
      color: #000;
    }
  .Ht_d_comment{
    font-size: 30/75rem;
    line-height: 88/75rem;
    span{
      padding: 0 10/75rem;
    }
  }
  }
  .Ht_d_main{
    padding-top: 20/75rem;
    padding-bottom: 20/75rem;
    h3{
      font-size: 40/75rem;
    }
    p:nth-of-type(1){
      color: orangered;
      font-size: 30/75rem;
      padding:10/75rem 5/75rem;
    }
    p:nth-of-type(2){
      font-size: 18/75rem;
      color: #ccc;
    }
  }
  .Ht_d_info{
    p{
      font-size: 28/75rem;
      //overflow: hidden;
    }
    img{
      float: right;

    }
  }
}
.Ht_d_foot{
  .Ht_way{
    p:nth-of-type(1){
      padding:15/75rem;
      font-size: 20/75rem;
    }
    p:nth-of-type(2),p:nth-of-type(3){
      font-size: 20/75rem;
      color:skyblue;
      padding:10/75rem;
    }
  }
  .Ht_talk{
    p{
      padding:10/75rem 5/75rem;
      font-size: 20/75rem;
    }
  }
  .Ht_greet{
    .circle{
      position: relative;
      width: 100/75rem;
      height: 100/75rem;
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid #000;
      float: left;
      margin:20/75rem 130/75rem;
      span{
        position: absolute;
        bottom: -35/75rem;
        left: 50%;
        transform:translatX(-50%,0);
        font-size: 25/75rem;
      }
      i{
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 50/75rem;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
      }
    }
  }
  .Ht_share{
   margin-top: 25/75rem;
    position: relative;
    height: 100/75rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    >span{
      position: absolute;
      top: -10/75rem;
      left: 50%;
      transform: translate(-50%,0);
      font-size: 12/75rem;
      width: 1.8rem;
      text-align: center;
      background-color: #fff;
    }
    ul{
      width: 100%;
      height: 100%;
      li{
        float: left;
        height: 100%;
        line-height: 100/75rem;
        width: 25%;
        text-align: center;
        a{
          display: block;
          width: 100%;
          height: 100%;
          span:nth-of-type(1){
            font-size: 30/75rem;
            color: blue;
          }
        }
      }
    }
  }
}
